<template>
  <div class="home-page">
    <el-row :gutter="20">
      <el-col :span="16" :push="4">
        <div class="grid-content ep-bg-purple">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="queryForm.name" placeholder="教练姓名" clearable/>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.level" placeholder="教练等级" style="width: 240px">
                <el-option label="全部" :value="0"/>
                <el-option label="初级" :value="1"/>
                <el-option label="中级" :value="2"/>
                <el-option label="高级" :value="3"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.gender" placeholder="教练性别" style="width: 240px">
                <el-option label="全部" value="null"/>
                <el-option label="男" value="男"/>
                <el-option label="女" value="女"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-divider>
      <el-icon>
        <star-filled/>
      </el-icon>
    </el-divider>
    <el-row :gutter="20">
      <el-row :gutter="20" v-infinite-scroll="load" style="min-height: 100vh">
        <el-col :span="6" v-for="item in dataList" :key="item.trainerId">
          <el-card>
            <img :src="item.avatar" alt="头像" style="width: 100%; height: auto; object-fit: cover;">
            <div style="padding: 14px;">
              <h3>{{ item.name }}</h3>
              <p>等级：{{ item.level }}</p>
              <p>性别：{{ item.gender }}</p>
              <p>电话：{{ item.phone }}</p>
              <p>介绍：{{ item.specialties }}</p>

              <el-button @click="info(item)" plain>
                <el-icon :size="20" style="margin-right: 10px">
                  <View/>
                </el-icon>
                详情
              </el-button>
            </div>
          </el-card>
        </el-col>


        <el-col v-if="noMore" :span="6">
          <el-card>
            没有更多了
          </el-card>
        </el-col>
      </el-row>
    </el-row>
  </div>

  <!-- 教练的详情信息 -->
  <el-dialog v-model="dialogVisible" title="教练详情" :width="'80%'" :height="'90%'">
    <el-row :gutter="20" style="height: 500px;" class="course-info">
      <el-col :span="3" style="padding: 10px;">
        <!-- 教练个人信息 -->
        <div>
          <h3>{{ coachInfo.name }}</h3>
          <p>等级：{{ coachInfo.level }}</p>
          <p>性别：{{ coachInfo.gender }}</p>
          <p>电话：{{ coachInfo.phone }}</p>
          <p>邮箱：{{ coachInfo.email }}</p>
          <p>介绍：{{ coachInfo.specialties }}</p>
          <p>证书：
            <img :src="coachInfo.certifications" alt="证书" style="width: 100%; height: auto; object-fit: cover;">
          </p>
        </div>
      </el-col>
      <el-col :span="1" style="padding: 10px;"></el-col>
      <el-col :span="20" style="padding: 10px;overflow-y: auto;">
        <el-row v-infinite-scroll="loadCourse" style="overflow-y: auto;height: 100%">
          <el-col @click="handleCourseClick(item)" style="padding: 5px 10px;" :span="8"
                  v-for="(item, index) in coachCoursesList"
                  :key="`course-${index}`">
            <el-card class="course-card">
              <el-image style="width: 100%; height: 200px; object-fit: cover;" :src="item.img" fit="cover"/>
              <div style="padding: 14px;">
                <span>课程标题：{{ item.title }}</span>
                <div>分类：{{ item.categoryName }}</div>
                <div>开始时间：{{ formatTime(item.startTime) }}</div>
                <div>结束时间：{{ formatTime(item.endTime) }}</div>
                <div>时长：{{ item.duration }} 小时</div>
                <div>地址：{{ item.location }}</div>
                <div>介绍：{{ item.description }}</div>
                <div>价格：¥{{ item.price }}</div>
                <div>状态：
                  <el-tag v-if="item.state === 1 || item.state === 2" type="success">正常</el-tag>
                  <el-tag v-else type="danger">已停止</el-tag>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col v-if="noMoreCourse" :span="8">
            <el-card>
              没有更多了
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 课程的详情信息 -->
  <el-dialog v-model="dialogVisibleCourse" title="课程详情信息" :width="'80%'" :height="'90%'">
    <el-row :gutter="20" style="height: 500px;" class="course-info">
      <el-col :span="8" style="padding: 10px;">
        <!-- 教练个人信息 -->
        <div>
          <h3>教练个人信息</h3>
          <p>头像：
            <img :src="coachInfo.avatar" alt="头像" style="width: 100%; height: auto; object-fit: cover;">
          </p>
          <h3>姓名：{{ coachInfo.trainerName }}</h3>
          <p>等级：{{ coachInfo.level }}</p>
          <p>性别：{{ coachInfo.gender }}</p>
          <p>电话：{{ coachInfo.phone }}</p>
          <p>邮箱：{{ coachInfo.email }}</p>
          <p>介绍：{{ coachInfo.specialties }}</p>
          <p>证书：
            <img :src="coachInfo.certifications" alt="证书" style="width: 100%; height: auto; object-fit: cover;">
          </p>
        </div>
      </el-col>
      <el-col :span="4" style="padding: 10px;"></el-col>
      <el-col :span="12" style="padding: 10px;">
        <!-- 课程信息 -->
        <div>
          <h3>课程信息</h3>
          <p>
            <img :src="coachInfo.img" alt="课程主图" style="width: 100%; height: auto; object-fit: cover;">
          </p>
          <h3>标题：{{ coachInfo.title }}</h3>
          <p>类型：{{ coachInfo.categoryName }}</p>
          <p>开始时间：{{ formatTime(coachInfo.startTime) }}</p>
          <p>结束时间：{{ formatTime(coachInfo.endTime) }}</p>
          <p>时长：{{ coachInfo.duration }} 小时</p>
          <p>地址：{{ coachInfo.location }}</p>
          <p>优势介绍：{{ coachInfo.description }}</p>
          <p>价格：{{ coachInfo.price }}</p>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogVisibleCourse = false">关闭</el-button>
        <el-button type="primary" @click="handleSubscribe">预约</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {StarFilled, View} from "@element-plus/icons-vue";
import {apiGet, apiPost} from "@/utils/api.ts";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {sessionStorage} from "@/utils/storage.ts";
import {formatTime} from "@/utils/time.ts";

let $router = useRouter()
const $route = useRoute();
//定义是否弹出详情
let dialogVisible = ref<boolean>(false)
const noMore = ref(false)
const page = ref(1)
const limit = ref(0)
const noMoreCourse = ref(false)
const pageCourse = ref(1)
const limitCourse = ref(0)
//表单类型
const queryForm = reactive({
  name: '',
  level: '',
  gender: ''
})
//教练数据
const dataList = ref([])
//教练的课程数据
const coachCoursesList = ref([]);
//选择的课程信息
const coachInfo = reactive({
  avatar: '',
  certifications: '',
  specialties: '',
  phone: '',
  email: '',
  name: '',
  courseType: '',
  img: '',
  gender: '',
  level: '',
  description: '',
  title: '',
  categoryName: '',
  maxParticipants: 0,
  duration: '',
  trainerName: '',
  price: 0,
  startTime: '',
  location: '',
  endTime: '',
  state: 0,
  courseId: 0,
  trainerId: 0
});
//选择的教练id
const trainerId = ref(0);
//初始化数据
const load = async () => {
  limit.value += 10
  let parameter = {
    page: page.value,
    limit: limit.value,
    name: queryForm.name,
    gender: queryForm.gender,
    level: queryForm.level
  }
  if (limit.value === 10 && dataList.value.length <= limit.value) {
    noMore.value = false
    //获取表单数据
    let {data} = await apiGet('/trainers/findAll', parameter)
    dataList.value = data.data
  } else if (dataList.value.length < limit.value && limit.value - dataList.value.length > 10) {
    noMore.value = true
  } else {
    noMore.value = false
    //获取表单数据
    let {data} = await apiGet('/trainers/findAll', parameter)
    dataList.value = data.data
  }
}

//搜索事件
const handleSearch = () => {
  limit.value = 0;
  noMore.value = false;
  load();
}
//详情事件
const info = async (item: any) => {
  Object.assign(coachInfo, item);
  trainerId.value = item.trainerId;
  await loadCourse();
  dialogVisible.value = true
}
//加载课程
const loadCourse = async () => {
  limitCourse.value += 10
  let parameter = {
    page: pageCourse.value,
    limit: limitCourse.value,
    trainerId: trainerId.value
  }
  if (limitCourse.value === 10 && coachCoursesList.value.length <= limitCourse.value) {
    noMoreCourse.value = false
    //获取表单数据
    let {data} = await apiGet('/courses/findAll', parameter)
    coachCoursesList.value = data.data
  } else if (coachCoursesList.value.length < limitCourse.value && limitCourse.value - coachCoursesList.value.length > 10) {
    noMoreCourse.value = true
  } else {
    noMoreCourse.value = false
    //获取表单数据
    let {data} = await apiGet('/courses/findAll', parameter)
    coachCoursesList.value = data.data
  }
}
//定义是否弹出详情
let dialogVisibleCourse = ref<boolean>(false)
//点击课程事件
const handleCourseClick = (item) => {
  Object.assign(coachInfo, item);
  dialogVisibleCourse.value = true
};
//预约事件
const handleSubscribe = async () => {
  let usertoken = sessionStorage.get('USER_TOKEN');
  //如果为空，提示请先登录，否则进行下一步
  if (!usertoken) {
    ElMessage.error("请先登录");
    //跳转到登录页面
    await $router.push({path: '/login', query: {redirect: $route.path}})
    return;
  }
  let parameter = {
    courseId: coachInfo.courseId,
    coachId: coachInfo.trainerId,
    status: 2
  }
  await apiPost('/bookings/add', parameter)
  dialogVisible.value = false
}
onMounted(() => {
  load();
})
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.course-info {
  /* 确保有足够的空间来显示滚动条 */

  .el-col {
    height: 500px; /* 或者您希望的高度 */
    overflow-y: auto;
  }

  /* 确保卡片内容不会超出其容器 */

  .el-card {
    max-height: 100%;
  }
}

</style>